<!--
 * @Description: MouseEvent
 * @Author: rendc
 * @Date: 2025-11-06 09:17:41
 * @LastEditors: rendc
 * @LastEditTime: 2025-11-06 09:39:31
-->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>MouseEvent</title>
  <style>
    body {
      margin: 0;
      height: 1000px;
      border: 1px solid red;
      /* 盒子模型 */
      /* 边框 */
      /* 内容 */
    }
  </style>
</head>
<body>
  MouseEvent
  <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
  底部
</body>
<script>
  // 事件绑定
  // 事件源 
  var bodyTag = document.getElementsByTagName("body")[0];
  console.log('🤡 CC - bodyTag:', bodyTag);
  // 绑定事件
  bodyTag.onclick = bodyTagClick;
  // 事件处理程序
  function bodyTagClick(event){
    // console.log('🤡 CC - bodyTagClick - event:', event);
    // event.clientX,event.clientY
    console.log('🤡 CC - clientX,clientY:', event.clientX,event.clientY);
    console.log('🤡 CC - pageX,pageY:', event.pageX,event.pageY);
    console.log('🤡 CC - screenX,screenY:', event.screenX,event.screenY);
    
    
  }
  
</script>
</html>